<template>
	<u-popup :show="visible" mode="center" :safeAreaInsetBottom="false" round="20rpx">
		<view class="header flex_center">
			<span>订单导出</span>
			<view class="icon" @tap="hide">
				<u-icon name="close" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="content">
			<view class="content-line">
				<text class="line-title">开始时间</text>
				<text class="line-content" :class="{'active':startTimeShow}"
					@tap="startTimeClick">{{startTime|filter_date}}</text>
			</view>
			<view class="content-line">
				<text class="line-title">结束时间</text>
				<text class="line-content" :class="{'active':endTimeShow}" @tap="endTimeClick">{{endTime|filter_date}}</text>
			</view>
		</view>
		<view class="footer flex_center">
			<u-button text="导出" type="primary" shape="circle" color="#276AEE" :loading="loading" :loadingSize="28"
				:customStyle="{width:'280rpx',height:'70rpx'}" @tap.stop.prevent="handleExport"></u-button>
		</view>

		<u-datetime-picker ref="startTimePicker" :value="startTime" :show="startTimeShow" :visibleItemCount="7" mode="date"
			@confirm="startTimeConfirm" @cancel="startTimeCancle"></u-datetime-picker>
		<u-datetime-picker ref="endTimePicker" :value="endTime" :show="endTimeShow" :visibleItemCount="7" mode="date"
			@confirm="endTimeConfirm" @cancel="endTimeCancle"></u-datetime-picker>
	</u-popup>
</template>

<script>
	import commonJS from '@/common/libs/common.js'

	export default {
		data() {
			return {
				visible: false,
				loading: false,
				shopOpenId: '',
				startTime: Date.now(),
				endTime: Date.now(),
				startTimeShow: false,
				endTimeShow: false,
				filePath: `${wx.env.USER_DATA_PATH}/订单表.xlsx`, //导出的文件名
			}
		},
		filters: {
			filter_date(value) {
				return commonJS.formatTimestamp(value, 'yyyy-MM-dd')
			}
		},
		methods: {
			show(shopOpenId) {
				this.shopOpenId = shopOpenId
				this.visible = true
			},
			hide() {
				this.visible = false
			},
			handleCancle() {
				this.hide()
			},
			startTimeClick() {
				this.startTimeShow = true
			},
			endTimeClick() {
				this.endTimeShow = true
			},
			startTimeConfirm({ value }) {
				this.startTime = value
				this.startTimeShow = false
			},
			endTimeConfirm({ value }) {
				this.endTime = value
				this.endTimeShow = false
			},
			startTimeCancle() {
				this.startTimeShow = false
			},
			endTimeCancle() {
				this.endTimeShow = false
			},
			async handleExport() {
				let params = {
					startTime: commonJS.formatTimestamp(this.startTime, 'yyyy-MM-dd') + ' 00:00:00',
					endTime: commonJS.formatTimestamp(this.endTime, 'yyyy-MM-dd') + ' 23:59:59',
					shopOpenId: this.shopOpenId,
					status: 1 // 发货状态(0-未完成，1-已完成，2-进行中)
				}
				this.loading = true
				await this.$api.exportGoodsInfo(params).then(async res => {
					console.log(res);
					let downloadFlag = await this.writeFile(res)
					if (downloadFlag) {
						this.openDocument()
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				}).finally(() => {
					this.loading = false
				})
			},
			writeFile(arraybuffer) {
				return new Promise((resolve) => {
					let fm = wx.getFileSystemManager(); //获取文件管理器
					fm.writeFile({ //写入文件
						filePath: this.filePath, //文件名
						data: arraybuffer, //数据
						encoding: "binary",
						success: res => {
							console.log(res, '保存文件');
							resolve(true)
						},
						fail: err => {
							// console.log(err, '保存失败');
							uni.showModal({
								title: '提示',
								content: "文件下载失败",
								showCancel: false, //是否显示取消按钮
							})
							resolve(false)
						},
					})
				})
			},
			openDocument() {
				const that = this
				uni.showModal({
					title: "下载成功",
					content: "是否打开?",
					confirmText: "打开",
					success(res) {
						if (res.confirm) {
							wx.openDocument({ //打开文件
								filePath: that.filePath, //文件名
								showMenu: true, //右上角是否显示(...)
								success(res) {
									console.log(res);
								},
							});
						} else if (res.cancel) {}
						that.hide()
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: relative;
		padding: 30rpx;
		color: #000000;
		font-weight: bold;
		font-size: 30rpx;

		.icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}

	.content {
		width: 690rpx;
		padding: 30rpx 114rpx 20rpx;
		box-sizing: border-box;

		.content-line {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.line-title {
				color: #000000;
				font-size: 26rpx;
			}

			.line-content {
				width: 280rpx;
				height: 70rpx;
				color: #C7C7C7;
				font-size: 26rpx;
				font-weight: bold;
				background: #F1F1F1;
				border-radius: 10rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #FFFFFF;
					background: #276AEE;
				}
			}
		}

		.content-line+.content-line {
			margin-top: 37rpx;
		}
	}

	.footer {
		position: relative;
		padding: 20rpx 30rpx 40rpx;

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 40rpx;
			right: 40rpx;
			border-bottom: 1rpx solid #F1F1F1;
		}
	}
</style>